<template>
    <div class="table-page">
        <div class="table-search-box" @keyup.enter="search()">
            <div class="search-item">
                <label>类型：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.type"
                        clearable
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </div>

            </div>
            <!--            <div class="search-item">
                            <label>是否公开：</label>
                            <div class="table-query-input">
                                <el-select
                                    v-model="queryData.open"
                                    clearable
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in openOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </div>

                        </div>-->
            <div class="search-item">
                <label>是否审核：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.verify"
                        clearable
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in verifyOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </div>

            </div>
            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="clickSearch()"
                >搜索
                </el-button>
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="resetSearch()"
                >重置
                </el-button>
            </div>
        </div>
        <div class="table-operation-box">
            <el-button
                type="primary"
                icon="el-icon-plus"
                style="margin-bottom: 2em"
                @click="batchLock(true)"
                :disabled="selectDisable"
            >批量审核
            </el-button>
            <!--            <el-button
                            type="danger"
                            icon="el-icon-delete"
                            style="margin-bottom: 2em"
                            :disabled="ids.length === 0"
                            @click="
                                tableDelete(
                                    '/exam/question-type/deleted-list',
                                    {
                                        ids: ids
                                    },
                                    true
                                )
                            "
                            >批量删除
                        </el-button>-->
        </div>
        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                border
                :data="tableData"
                style="width: 100%;min-height:40em"
                row-key="id"
                :highlight-current-row="true"
                @selection-change="tableSelectionChange"

            >

                <el-table-column
                    type="selection"
                    min-width="55"
                    align="center"
                    :resizable="false"
                    :selectable="verifyEnable"
                >
                </el-table-column>

                <el-table-column
                    prop="relationId"
                    label="关联id"
                    width="150"
                    align="center"
                    :resizable="false"
                >
                </el-table-column>
                <el-table-column
                    prop="relationName"
                    label="关联名"
                    width="150"
                    align="center"
                    :resizable="false"
                >
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="类型"
                    width="150"
                    align="center"
                    :resizable="false"
                >
                    <template slot-scope="scope">
                        {{ setStatus(scope.row) }}
                    </template>
                </el-table-column>
                <el-table-column label="是否公开" prop="open" width="100">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.open" type="success"
                        >已公开
                        </el-tag
                        >
                        <el-tag v-if="!scope.row.open" type="warning"
                        >未公开
                        </el-tag
                        >
                    </template>
                </el-table-column>
                <el-table-column label="审核状态" prop="verify" width="110">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.verify===1" type="success"
                        >审核通过
                        </el-tag
                        >
                        <el-tag v-if="scope.row.verify===0" type="warning"
                        >未审核
                        </el-tag
                        >
                        <el-tag v-if="scope.row.verify===2" type="danger"
                        >审核不通过
                        </el-tag
                        >
                        <el-tag v-if="scope.row.verify===3" type="success"
                        >自动通过
                        </el-tag
                        >
                    </template>
                </el-table-column>
                <el-table-column
                    prop="content"
                    width="500"
                    label="内容"
                    align="center"
                    :resizable="false"
                >
                </el-table-column>
                <el-table-column
                    prop="questionId"
                    label="试题id"
                    align="center"
                    :resizable="false"
                >
                </el-table-column>
                <el-table-column
                    prop="createdTime"
                    label="创建日期"
                    align="center"
                    :resizable="false"
                >
                </el-table-column>
                <el-table-column
                    prop="createdBy"
                    label="创建人id"
                    align="center"
                    :resizable="false"
                >
                </el-table-column>
                <el-table-column
                    prop="modifyBy"
                    label="最后操作者"
                    align="center"
                    :resizable="false"
                >
                    <template slot-scope="scope">
                        <div>
                            <p>{{ scope.row.modifyBy }}</p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="200"
                    align="center"
                    fixed="right"
                    :resizable="false"
                >
                    <template slot-scope="scope">

                        <el-button
                            v-if="!scope.row.edit"
                            class="danger"
                            type="text"
                            icon="el-icon-delete"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="
                                tableDelete(
                                    '/exam/note/deletes',
                                    {
                                        ids: [scope.row.id]
                                    },
                                    true
                                )
                            "
                        >删除
                        </el-button>
                        <el-button
                            v-if="scope.row.verify==0"
                            class="success"
                            type="text"
                            icon="el-icon-success"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="
                                updateVerify(
                                   [scope.row.id],
                                    1
                                )
                            "
                        >通过
                        </el-button>
                        <el-button
                            v-if="scope.row.verify==0"
                            class="danger"
                            type="text"
                            icon="el-icon-error"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="
                                updateVerify(
                                       [scope.row.id]
                                    ,
                                    2
                                )
                            "
                        >不通过
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>
        <el-dialog
            :title="dialogFormTitle"
            :visible.sync="dialogFormVisible"
            width="20%"
        >
            <el-form
                ref="dataForm"
                :model="dataForm"
                label-width="8em"
                :rules="dataFormRule"
                class="table-edit-from"
            >
                <el-input v-model="dataForm.id" type="hidden"></el-input>
                <el-form-item label="类型" prop="firstType">
                    <el-select
                        v-model="dataForm.firstType"
                        :disabled="dataForm.firstType !== null"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="题型名称" prop="name">
                    <el-input v-model="dataForm.name"></el-input>
                </el-form-item>
                <el-form-item label="题型备注" prop="remark">
                    <el-input v-model="dataForm.remark"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button :loading="submitFlag" @click="dialogClose"
                >取 消</el-button
                >
                <el-button
                    :loading="submitFlag"
                    type="primary"
                    @click="formDataSave('/exam/question-type/update')"
                >保 存</el-button
                >
            </span>
        </el-dialog>
        <el-dialog
            title="批量审核"
            :visible.sync="dialogVisible"
            width="30%"
            center
        >
            <span>是否审核这些笔记</span>
            <span slot="footer" class="dialog-footer">
            <div class="batchReview">
                <el-button type="success" @click="updateVerify(tableSelect,1)">通过</el-button>
                <el-button type="danger" @click="updateVerify(tableSelect,2)">不通过</el-button>
            </div>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {TablePage} from "@/layout/mixin/iVue.js";
import {mapState} from "vuex";
import {post, put} from "@/api/request";

export default {
    name: "QuestionNoteIndex",
    components: {},
    mixins: [TablePage],
    data() {
        return {
            openOptions: [{
                value: true,
                label: "公开"
            }, {
                value: false,
                label: "未公开"
            }],
            verifyOptions: [{
                value: 1,
                label: "审核通过"
            }, {
                value: 0,
                label: "未审核"
            },
            {
                value: 2,
                label: "审核不通过"
            },
            {
                value: 3,
                label: "自动审核"
            }
            ],
            options: [
                {
                    value: "chapter",
                    label: "章节"
                },
                {
                    value: "paper",
                    label: "试卷"
                },
                {
                    value: "everyDayPractice",
                    label: "每日一练"
                }, {
                    value: "rankError",
                    label: "高频错题"
                }, {
                    value: "rankCollect",
                    label: "其它笔记"
                }
            ],
            notePageData: {
                pageSizes: [10, 20, 30, 50, 100, 200],
                currentPage: 1,
                total: 0,
                pageSize: 100
            },
            pageData: {
                pageSizes: [10, 20, 30, 50, 100, 200],
                currentPage: 1,
                total: 0,
                pageSize: 100
            },
            queryData: {
                name: "",
                remark: "",
                firstType: "",
                pageSize: 100,
                currentPage: 1
            },
            tableData: [],
            dialogVisible: null,
            ids: [],
            initAddForm: {
                id: null,
                name: null,
                remark: null,
                firstType: null
            },
            multipleSelection: [],
            dataFormRule: {
                firstType: [
                    {
                        required: true,
                        message: "请选择大类型！",
                        trigger: "change"
                    }
                ],
                name: [
                    {
                        required: true,
                        message: "题型名称不可为空！",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    computed: {
        ...mapState({
            status: state => state.status.questionCollectionType
        })
    },
    watch: {
        actionSearch(val) {
            this.$refs.tree.filter(val);
        }
    },
    methods: {
        batchLock() {
            this.dialogVisible = true;
        }, verifyEnable(row, rowIndex) {
            if (row.verify === 0) {
                return true;
            }
            return false;
        },

        clearQuery() {
            (this.queryData = {}), this.search();
        },
        search(queryData) {
            this.loadTable("/exam/note/page", queryData);
        },

        filterAction(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        setStatus(data) {
            var status = this.status[data.type];
            return status === undefined ? "其它笔记" : status;
        },
        updateVerify(ids, status) {
            put(`/exam/note/batch-verify`, {ids, status})
                .then(res => {
                    this.search();
                })
            this.dialogVisible = false;

        },
        clickSelectAction(data, checked, indeterminate) {
            const actionCode = data.id;
            if (checked) {
                this.dataForm.actionCodes.push(actionCode);
            } else {
                this.dataForm.actionCodes.splice(
                    this.dataForm.actionCodes.indexOf(actionCode),
                    1
                );
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.search-item {
    label {
        margin-left: 1em;
    }
}
</style>
